<template>
  <div>
    <el-dialog
      title="创建"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
       :rules="rules"
        ref="form"
        :model="form"
        label-width="80px"
      >
       <el-form-item
          label="部门名称"
          prop="name"
        >
          <el-input v-model="form.name" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item
          label="负责人"
          prop="userName"
        >
          <el-input v-model="form.userName" placeholder="请输入负责人"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="add('form')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { saveOrUpdate } from "@/api/company";
export default {
  name: "create",
  data () {
    return {
      dialogVisible: false,
      form: {
        name:'',
        userName: '',
      },
        //表单验证
      rules: {
        name: [{ required: true, message: "请输入部门", trigger: "blur" }],
        userName: [{ required: true,message: "请输入负责人", trigger: "blur"}],
      },
    }
  },
  methods: {
      
    show () {
       
      this.dialogVisible = true
     this.form = {
        name:"",
        userName: '',
      }
    },
    //添加
    add (form) {
       this.$refs[form].validate((valid) => {
        if (valid) {
          saveOrUpdate(this.form).then(res => {
        if (res.status === 200) {
          this.$emit("Ok");
          this.dialogVisible = false;
          this.$message.success("创建成功");
        }
      });
        } else {
          this.$message.error("创建失败");
          return false;
        }
      });
    },

  }
}
</script>

<style scoped>
</style>
